<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>邮件</title>
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" />
		<link rel="stylesheet" href="css/main.css" />
	</head>

	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="w-1200">
				<div class="logo">
					<!-- <img src="images/logo_03.png"> -->
					简易办公
				</div>
				<ul>
					<li><a>组织图</a></li>
					<li><a href="set.html">个人设置</a></li>
					<li><a id="exit">退出</a></li>
				</ul>
				<div class="personnel">
					<span>欢迎登录：</span>
					<span id="userName"></span>
					<span>账号ID：</span>
					<span id="userId"></span>
				</div>
			</div>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<div class="w-1200">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li class="cur"><a href="email.html">邮件</a></li>
					<!-- <li><a href="approval.html">审批</a></li> -->
					<li><a href="notice.html">公告</a></li>
					<li><a href="report.html">业务报告</a></li>
					<!-- <li><a href="task.html">任务奖励</a></li> -->
					<!-- <li><a href="work.html">考勤管理</a></li> -->
					<li><a href="personnel.html">人员管理</a></li>
					<li><a href="homepage.html">网站主页</a></li>
				</ul>
			</div>
		</div>
		<!-- 内容 -->
		<div class="w-1200 container">
			<!-- 左侧导航 -->
			<div class="Left LeftMore">
				<div class="columnBox">
					<h1><a class="receive cur">收件箱</a></h1>
				</div>
				<div class="columnBox">
					<h1><a class="send">已发送</a></h1>
				</div>
				<div class="columnBox">
					<h1><a class="draft">草稿箱</a></h1>
				</div>
				<div class="columnBox">
					<h1><a class="delete">已删除</a></h1>
				</div>
			</div>

			<!-- 右侧内容 -->
			<div class="Right RightMore">
				<ul class="operate">
					<li><a class="write">写信</a></li>
					<li><a class="delete">删除</a></li>
				</ul>
				<div class="none">
					暂无邮件记录
				</div>
				<table class="table-list">
					<thead>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div class="zxf_pagediv"></div>
			</div><!-- RightMore -->
		</div>
		<!-- 写信 -->
		<div class="write-box">
			<ul class="operate">
				<li><a class="send">发送</a></li>
				<li><a class="save">存草稿</a></li>
				<li><a class="close">关闭</a></li>
			</ul>
			<div class="write-con">
				<table>
					<tr>
						<td><span>收件人：</span></td>
						<td>
							<div class="ztree-box">
								<input placeholder="请选择" id="recipient">
								<div class="ztree-group">
									<ul class="ztree" id="treeDemo"></ul>
									<button class="btn-normal">确定</button>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td><span>标题：</span></td>
						<td><input placeholder="请填写标题" id="mailTitle"></td>
					</tr>
					<tr>
						<td><span>正文：</span></td>
						<td><textarea placeholder="字符500以内~" id="mailContent"></textarea>

						</td>
					</tr>
					<tr>
						<td><span>附件：</span></td>
						<td>
							<div class="flie-box">
								<button onclick="func()">选择附件</button>
								<input type="file" id="f" multiple="multiple" />
								<button id="testFile">测试附件提交</button>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="look-box">
			<ul class="operate">
				<li><a class="">回复</a></li>
				<li><a class="sendOther">转发</a></li>
				<li><a class="save">存草稿</a></li>
				<li><a class="close">关闭</a></li>
			</ul>
			<div class="write-con">
				<table>
					<tr>
						<td><span>发件人：</span></td>
						<td id="showPerson"></td>
					</tr>
					<tr>
						<td><span>收件人：</span></td>
						<td id="receivePer"></td>
					</tr>
					<tr>
						<td><span>时间：</span></td>
						<td id="showTime"></td>
					</tr>
					<tr>
						<td><span>标题：</span></td>
						<td id="showTitle"></td>
					</tr>
					<tr>
						<td><span>正文：</span></td>
						<td>
							<div id="showCon"></div>
						</td>
					</tr>
					<!-- <tr>
						<td><span>附件：</span></td>
						<td><input type="file"></td>
					</tr> -->
				</table>
			</div>
		</div>
		<div class="bg-shadow"></div>

		<!-- JS -->
		<!-- <script src="js/jquery.js"></script> -->
		<script src="js/jquery-1.11.1.min.js"></script>
		<!-- ztree -->
		<script src="zTree_v3/js/jquery.ztree.core.js"></script>
		<script src="zTree_v3/js/jquery.ztree.excheck.js"></script>
		<!-- 编辑器 -->
		<script src="kindeditor/kindeditor-all-min.js"></script>
		<script src="kindeditor/lang/zh-CN.js"></script>
		<!-- 分页 -->
		<script src="js/zxf_page.js"></script>
		<script src="js/common.js"></script>
		<script>
			// 获取用户信息
			token.getUser(token.local);
			// 退出登录
			$("#exit").click(function() {
				window.localStorage.token = '';
				token.getUser(token.local);
			})
			// 编辑器
			var editor = '';
			KindEditor.ready(function(K) {
				var options = {
					width: '100%',
					minHeight: '400px',
					items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
						'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
						'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
						'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
						'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
						'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'table', 'hr', 'emoticons',
						'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'
					]
				}
				editor = K.create('#mailContent', options);
			});
			// checkbox 全选
			$(".table-list ").on('click', 'thead tr th input[name=all]', function() {
				if (this.checked) {
					$(".table-list tbody tr td input:checkbox").prop("checked", true);
				} else {
					$(".table-list tbody tr td input:checkbox").prop("checked", false);
				}
			})
			// 删除邮件
			var num = "";
			$(".operate li a.delete").on('click', function() {
				num = "";
				var checkBox = $(".table-list tbody tr td input[type='checkbox']");
				var checkLength = checkBox.length
				for (var i = 0; i < checkLength; i++) {
					if (checkBox[i].checked) {
						num += checkBox[i].getAttribute("check-id") + ",";
					}
				}
				if (!num) {
					tool.tips("请选择删除项！");
					return false
				}
				var selNum = $(this).attr("column-id");
				emailDel(selNum)
			})

			function emailDel(fn) {
				var deleteE = $(".columnBox h1 a.delete");
				var idGroup = {
					ids: num
				}
				var src = ['radicalDelEmail', 'delEmail'];
				var urlDel = '';
				//判断是否为  已删除中文件
				if (deleteE.hasClass("cur")) {
					urlDel = src[0];
				} else {
					urlDel = src[1];
				}
				$.ajax({
					url: url.basic + urlDel,
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					data: JSON.stringify(idGroup),
					success: function(res) {
						console.log("删除返回", res);
						tool.tips("删除成功")
						switch (fn) {
							case "1":
								receive(1);
								break;
							case "2":
								sendEm(1);
								break;
							case "3":
								draftEmail(1);
								break;
							case "4":
								deleteEmail(1);
								break;
						}
					}
				})
			}
			// 收件箱加载显示
			$(".columnBox h1 a.receive").click(tool.throttle(receive, 2000))
			// 已读未读图标
			function readIcon(a) {
				switch (a) {
					case 0:
						return '<i class="email"></i>';
						break;
					case 1:
						return '<i class="email email-read"></i>';
						break;
				}
			}
			//翻页
			var pageTotal = '';
			var pageCur = '';
			receive(1);
			// 收件箱
			function receive(sel) {
				var selOne = sel;
				if (!selOne) {
					selOne = 1;
				}
				$(".table-list tr").remove();
				var dataEmail = {
					emailType: 1,
					pageNum: selOne,
					pageSize: 10
				}
				// debugger
				$.ajax({
					url: url.basic + 'findEmailByPage',
					type: 'POST',
					headers: {
						"token": token.local
					},
					contentType: 'application/json',
					dataType: "json",
					// beforeSend: function(XMLHttpRequest) {
					// 	XMLHttpRequest.setRequestHeader("token", token);
					// },
					data: JSON.stringify(dataEmail),
					success: function(res) {
						console.log("收件箱加载", res)
						pageTotal = res.data.pages;
						pageCur = res.data.pageNum;
						var str = "";
						var strH = '<tr><th width="20"><input name="all" type="checkbox"></th>' +
							'<th width="30">状态</th>' +
							'<th width="60">发件人</th>' +
							'<th>主题</th>' +
							'<th width="168">时间</th></tr>';
						if (res.data.total == 0) {
							$(".table-list").hide();
							$(".zxf_pagediv").hide();
							$(".none").fadeIn(200)
							tool.setHight();
						} else {
							$(".table-list").show();
							$(".none").hide()
							$.each(res.data.list, function(index, item) {
								str += '<tr data-id=' + item.id + ' class="' + "tr-read" + item.isCheck + '">' +
									'<td><input check-id=' + item.id + ' type="checkbox" ></td>' +
									'<td>' + readIcon(item.isCheck) + '</td>' +
									'<td>' + item.senderName + '</td>' +
									'<td><a class="title">' + item.mailTitle + '</a></td>' +
									'<td>' + item.createTime + '</td>' +
									'</tr>'
							})
							$(".table-list thead").append(strH);
							$(".table-list tbody").append(str);
							tool.setHight()
						}
						// 分页
						$(".zxf_pagediv").unbind();
						$(".zxf_pagediv").createPage({
							pageNum: pageTotal, //分页总数
							current: pageCur, //当前页数
							backfun: function(e) {
								console.log(e); //回调
								var sel = e.current;
								if (sel) {
									if (sel > pageTotal) {
										sel = pageTotal;
									} else if (sel < 1) {
										sel = 1;
									}
									receive(sel);
								} else {
									tool.tips("请输入数字！")
								}
							}
						});
					},
					error: function(err) {
						console.log(err)
					}
				})
			}
			// 已发送邮件
			$(".columnBox h1 a.send").click(function() {
				sendEm(1)
			})
			// 已发送
			function sendEm(a) {
				$(".table-list tr").remove();
				var dataEmail = {
					emailType: 2,
					pageNum: a,
					pageSize: 10
				}
				$.ajax({
					url: url.basic + 'findEmailByPage',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					headers: {
						"token": token.local
					},
					data: JSON.stringify(dataEmail),
					success: function(res) {
						console.log("已发送邮件", res.data.list)
						pageTotal = res.data.pages;
						pageCur = res.data.pageNum;
						if (res.data.total == 0) {
							$(".table-list").hide();
							$(".zxf_pagediv").hide();
							$(".none").fadeIn(200)
						} else {
							$(".none").hide(100)
							$(".table-list").show();
							$(".zxf_pagediv").show();
							var strH = '<tr>' +
								'<th width="20"><input name="all" type="checkbox"></th>' +
								// '<th>状态</th>' +
								'<th width="80">收件人</th>' +
								'<th>主题</th>' +
								'<th width="168">时间</th>' +
								'</tr>';
							var str = "";
							$.each(res.data.list, function(index, item) {
								str += '<tr data-id=' + item.id + '>' +
									'<td><input check-id=' + item.id + ' type="checkbox" ></td>' +
									// '<td>' + readIcon(item.isCheck) + '</td>' +
									'<td>' + item.senderName + '</td>' +
									'<td><a class="title">' + item.mailTitle + '</a></td>' +
									'<td>' + item.createTime + '</td>' +
									'</tr>'
							})
							$(".table-list thead").append(strH);
							$(".table-list tbody").append(str);
						}
						// tool.setHight()
						// 分页
						$(".zxf_pagediv").unbind();
						$(".zxf_pagediv").createPage({
							pageNum: pageTotal, //分页总数
							current: pageCur, //当前页数
							backfun: function(e) {
								console.log(e); //回调
								var sel = e.current;
								if (sel) {
									if (sel > pageTotal) {
										sel = pageTotal;
									} else if (sel < 1) {
										sel = 1;
									}
									sendEm(sel);
								} else {
									tool.tips("请输入数字！")
								}
							}
						});
					},
					error: function(err) {
						console.log(err)
					}
				})
			}


			// 草稿箱邮件
			$(".columnBox h1 a.draft").click(function() {
				draftEmail(1)
			})
			// 草稿箱
			function draftEmail(a) {
				$(".table-list tr").remove();
				var dataEmail = {
					emailType: 3,
					pageNum: a,
					pageSize: 10
				}
				$.ajax({
					url: url.basic + 'findEmailByPage',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					data: JSON.stringify(dataEmail),
					success: function(res) {
						console.log("草稿箱", res)
						pageTotal = res.data.pages;
						pageCur = res.data.pageNum;
						if (res.data.total == 0) {
							$(".table-list").hide();
							$(".zxf_pagediv").hide();
							$(".none").fadeIn(200)
						} else {
							$(".none").hide(100)
							$(".table-list").show();
							$(".zxf_pagediv").show();
							var strH = '<tr>' +
								'<th width="20"><input name="all" type="checkbox"></th>' +
								// '<th>状态</th>' +
								// '<th>收件人</th>' +
								'<th>主题</th>' +
								'<th width="168">时间</th>' +
								'</tr>';
							var str = "";
							$.each(res.data.list, function(index, item) {
								str += '<tr data-id=' + item.id + '>' +
									'<td><input check-id=' + item.id + ' type="checkbox" ></td>' +
									// '<td>'+readIcon(item.isCheck)+'</td>' +
									// '<td>' + item.senderName + '</td>' +
									'<td><a class="title">' + item.mailTitle + '</a></td>' +
									'<td>' + item.createTime + '</td>' +
									'</tr>'
							})
							$(".table-list thead").append(strH);
							$(".table-list tbody").append(str);
						}
						// tool.setHight()
						// 分页
						$(".zxf_pagediv").unbind();
						$(".zxf_pagediv").createPage({
							pageNum: pageTotal, //分页总数
							current: pageCur, //当前页数
							backfun: function(e) {
								console.log(e); //回调
								var sel = e.current;
								if (sel) {
									if (sel > pageTotal) {
										sel = pageTotal;
									} else if (sel < 1) {
										sel = 1;
									}
									draftEmail(sel);
								} else {
									tool.tips("请输入数字！")
								}
							}
						});
					},
					error: function(err) {
						console.log(err)
					}
				})
			}
			// 已删除邮件
			$(".columnBox h1 a.delete").click(function() {
				deleteEmail(1)
			})
			// 已删除
			function deleteEmail(a) {
				$(".table-list tr").remove();
				var delEmail = {
					emailType: 4,
					pageNum: a,
					pageSize: 10
				}
				$.ajax({
					url: url.basic + 'findEmailByPage',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					data: JSON.stringify(delEmail),
					success: function(res) {
						console.log("以删除", res);
						pageTotal = res.data.pages;
						pageCur = res.data.pageNum;
						if (res.data.total == 0) {
							$(".table-list").hide();
							$(".zxf_pagediv").hide();
							$(".none").fadeIn(200)
						} else {
							$(".none").hide(100)
							$(".table-list").show();
							$(".zxf_pagediv").show();
							var strH = '<tr><th width="20"><input name="all" type="checkbox"></th>' +
								// '<th>状态</th>' +
								// '<th>发件人</th>' +
								'<th>主题</th>' +
								'<th width="168">时间</th></tr>';
							var str = "";
							$.each(res.data.list, function(index, item) {
								str += '<tr data-id=' + item.id + '>' +
									'<td><input check-id=' + item.id + ' type="checkbox" ></td>' +
									// '<td>'+readIcon(item.isCheck)+'</td>' +
									// '<td>' + item.senderName + '</td>' +
									'<td><a class="title">' + item.mailTitle + '</a></td>' +
									'<td>' + item.createTime + '</td>' +
									'</tr>'
							})
							$(".table-list thead").append(strH);
							$(".table-list tbody").append(str);
						}
						// tool.setHight()
						// 分页
						$(".zxf_pagediv").unbind();
						$(".zxf_pagediv").createPage({
							pageNum: pageTotal, //分页总数
							current: pageCur, //当前页数
							backfun: function(e) {
								console.log(e); //回调
								var sel = e.current;
								if (sel) {
									if (sel > pageTotal) {
										sel = pageTotal;
									} else if (sel < 1) {
										sel = 1;
									}
									deleteEmail(sel);
								} else {
									tool.tips("请输入数字！")
								}
							}
						});
					},
					error: function(err) {
						console.log(err)
					}
				})
			}


			// 写信
			function showMessage($selId, dataId) {
				$(".bg-shadow").fadeIn(100);
				$(".write-box").fadeIn(300);
				if ($selId == 3) {
					var lookId = {
						id: dataId
					}
					$.ajax({
						url: url.basic + 'findEmail',
						type: 'POST',
						contentType: 'application/json',
						dataType: "json",
						data: JSON.stringify(lookId),
						beforeSend: function(XMLHttpRequest) {
							XMLHttpRequest.setRequestHeader("token", token.local);
						},
						success: function(res) {
							console.log("查看草稿邮件", res)
							$("#mailTitle").val(res.data.mailTitle);
							editor.html(res.data.mailContent);
							// $("#showPerson").text(res.data.senderName);
							// $("#receivePer").text(res.data.recipientName);
							// $("#showCon").html(res.data.mailContent);
							// $("#showTime").text(res.data.createTime);
						},
						error: function(err) {
							console.log(err)
						}
					})
				}
			}

			function closeMessage() {
				$(".bg-shadow").fadeOut();
				$(".write-box").fadeOut(100);
				$(".look-box").fadeOut(100);
			}
			$(".operate li .write").click(function() {
				showMessage();
			})
			// 发送邮件
			var nowTime = '';
			$(".operate li .send").click(function() {
				tool.throttle(sendEmail(), 1000)
			})

			function sendEmail() {
				var recipientVal = document.getElementById("recipient").value;
				var mailTitleVal = document.getElementById("mailTitle").value;
				// var mailContentVal = document.getElementById("mailContent").value;
				var mailContentVal = editor.html();
				var sendCon = {
					recipientIds: valSel,
					mailTitle: mailTitleVal,
					mailContent: mailContentVal
				}
				$.ajax({
					url: url.basic + 'sendEmail',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					data: JSON.stringify(sendCon),
					success: function(res) {
						console.log(res)
						closeMessage()
						tool.tips("发送成功")
						document.getElementById("recipient").value = "";
						document.getElementById("mailTitle").value = "";
						document.getElementById("mailContent").value = "";
						$(".ztree-box .ztree-group").hide();
					},
					error: function(err) {
						console.log(err)
					}
				})
			}

			// 保存草稿
			$(".operate li .save").click(tool.throttle(saveEmail, 2000))

			function saveEmail() {
				var recipientVal = document.getElementById("recipient").value;
				var mailTitleVal = document.getElementById("mailTitle").value;
				// var mailContentVal = document.getElementById("mailContent").value;
				var mailContentVal = editor.html();
				if (mailTitleVal == "" || mailContentVal == "") {
					tool.tips("请补充必填项！");
					return false
				}
				var sendCon = {
					recipientIds: "1",
					mailTitle: mailTitleVal,
					mailContent: mailContentVal
				}
				$.ajax({
					url: url.basic + 'saveDraft',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					data: JSON.stringify(sendCon),
					success: function(res) {
						console.log("保存草稿", res)
						tool.tips("已保存到草稿箱，")
					},
					error: function(err) {
						console.log(err)
					}
				})
			}

			$(".operate li .close").click(function() {
				closeMessage();
			})

			// 查看邮件明细
			$(".table-list").on('click', ' tbody tr td a', function() {
				var $selId = $(".operate li a.delete").attr("column-id");
				var dataId = $(this).parent().parent("tr").attr("data-id");
				// console.log("selid",$selId)
				if ($selId == "3") {
					showMessage($selId, dataId)
				} else {
					lookMessage(dataId);
				}
			})

			function lookMessage(dataId) {
				$(".bg-shadow").fadeIn(100);
				$(".look-box").fadeIn(300);
				var lookId = {
					id: dataId
				}
				$.ajax({
					url: url.basic + 'findEmail',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					data: JSON.stringify(lookId),
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token.local);
					},
					success: function(res) {
						$("#showPerson").text(res.data.senderName);
						$("#receivePer").text(res.data.recipientName);
						$("#showTitle").text(res.data.mailTitle);
						$("#showCon").html(res.data.mailContent);
						$("#showTime").text(res.data.createTime);
					},
					error: function(err) {
						console.log(err)
					}
				})
			}

			// 加载用户列表 收件人 输入框激活状态
			$("#recipient").focus(function() {
				var userList = '';
				zNodes = [];
				$.ajax({
					url: url.basic + 'findUsers ',
					type: 'POST',
					contentType: 'application/json',
					dataType: "json",
					beforeSend: function(XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", token);
					},
					data: "",
					success: function(res) {
						var $myId = $("#userId").text();
						console.log("用户数据", res);
						userList = res.data;
						userList.forEach(function(item, index) {
							// console.log(item)
							if (item.id == $myId) {
								zNodes.push({
									id: item.id,
									pId: 0,
									name: item.realName,
									chkDisabled: true
								})
							} else {
								zNodes.push({
									id: item.id,
									pId: 0,
									name: item.realName
								})
							}
							// debugger
						});
						$.fn.zTree.init($("#treeDemo"), setting, zNodes);
						$(".ztree-group").slideDown(200);
					}
				})
			});
			// ztree 插件
			var setting = {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable: true
					}
				}
			};
			var zNodes = [];
			var valSel = '';
			var valSelName = '';
			$(".ztree-box button").click(function() {
				valSelName = '';
				valSel = '';
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
					nodes = treeObj.getCheckedNodes(true);
				for (var i = 0; i < nodes.length; i++) {
					valSel += nodes[i].id + ",";
					valSelName += nodes[i].name + ",";
				}
				$(".ztree-group").slideUp(200);
				$("#recipient").val(valSelName);
				console.log(valSel)
			})




			// 附件上传
			function func() {
				// document.getElementById("f").click()
				$("#f").click()
			}
			var obj0 = [];
			$("#f").change(function(e) {
				// console.log(e);
				$(".flie-box p").remove();
				obj0 = [];
				obj = [];
				var f = document.getElementById("f").files;
				console.log(f.length);
				console.log(f);
				var str = "";
				for (var i = 0; i < f.length; i++) {
					str += '<p data-id ="' + i + ' ">' + f[i].name + '<button class="delate">删除</button></p>';
					//上次修改时间
					// console.log(f[i].lastModifiedDate);
					//名称
					// console.log(f[i].name);
					//大小 字节
					// console.log(f[i].size);
					//类型
					// console.log(f[i].type);
					obj0.push(i)
				}
				$(".flie-box").append(str)
				console.log(obj0);
			});
			var obj = [];
			$(".flie-box").on('click', 'p .delate', function() {
				var _this = $(this);
				var num = Number(_this.parent("p").attr("data-id"));
				_this.parent("p").remove();
				obj.push(+num);
				obj.sort();
				console.log(obj);
				var f = document.getElementById("f").files;
				console.log(f.length);
				// console.log(_this)
			})

			$("#testFile").click(function() {
				// 数组去重
				var newArray = [];
				for (var i = 0; i < obj0.length; i++) {
					console.log(obj.indexOf(obj0[i]));
					if (obj.indexOf(obj0[i]) == -1) {
						newArray.push(obj0[i])
					}
				}
				// console.log(newArray);
				// 选出剩余没有被删除的附件
				var f = document.getElementById("f").files;
				for (var j = 0; j < newArray.length; j++) {
					console.log(f[newArray[j]])
				}
			})
		</script>
	</body>
</html>
